<template>
  <main-card title="数据集" :show-screen-space="false">
    <div class="flex justify-between items-center">
      <switch-tabs class="pb-12" :selected-tab="selectedTab" :tabs="tabs" @switch-tab="onSwitchTab" />
      <div v-if="selectedTab === '/data-set/list/my-data'" class="display-btns">
        <div :class="['btn', !active && 'active']" style="padding-left: 8px" @click="activeSwitch">
          <img class="logo" :src="!active ? listCheckActive : listCheckDefault" />
        </div>
        <div :class="['btn', active && 'active']" @click="activeSwitch">
          <img class="logo" :src="active ? layoutActive : layoutDefault" />
        </div>
      </div>
    </div>
    <router-view />
  </main-card>
</template>

<script setup lang="ts">
  import { storage } from 'g6-fn'
  import { ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import layoutActive from '@/assets/img/customer/layout-active.svg'
  import layoutDefault from '@/assets/img/customer/layout-default.svg'
  import listCheckActive from '@/assets/img/customer/list-check-active.svg'
  import listCheckDefault from '@/assets/img/customer/list-check-default.svg'
  import SwitchTabs from '@/components/SwitchTabs/index.vue'

  import DataBoard from '../components/DataBoard/index.vue'

  const router = useRouter()
  const route = useRoute()
  /*------------------------------------------ tab ------------------------------------------*/

  const tabs = [
    {
      name: '公开数据集',
      key: '/data-set/list/public-data'
    },
    {
      name: '我的收藏',
      key: '/data-set/list/favorite'
    }
  ]

  const selectedTab = ref(route.path)
  const onSwitchTab = (key: string) => {
    selectedTab.value = key
    router.push(key)
  }
  /*------------------------------------------------------------------------------------*/

  /*------------------------------------------ 我的数据集panel切换 ------------------------------------------*/
  const active = ref<boolean>(false)
  const activeSwitch = (): void => {
    active.value = !active.value
    storage.set('DataBoardActive', active.value)
  }

  const activeFlag = (): void => {
    if (route.path === '/data-set/list/my-data') {
      const re = storage.get('DataBoardActive') || false
      active.value = re
    }
  }
  activeFlag()
</script>

<style lang="less" scoped>
  .display-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    padding: 3px 2px 3px 3px;
    width: 68px;
    height: 36px;
    background: #fff;
    border: 1px solid rgba(217, 217, 219, 0.5);
    border-radius: 100px;

    /* Shadow/button */
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04);

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 8px;
      background: #fff;
      cursor: pointer;
    }

    .active {
      padding-right: 0 !important;
      padding-left: 0 !important;
      width: 30px;
      height: 30px;
      border-radius: 100px;

      /* Shadow/S */
      box-shadow: 0 1px 3px 0 rgba(37, 37, 45, 0.16);
    }
  }
</style>
